<script lang="ts" setup>
import { computed, ref } from 'vue';
import { initVueI18n } from '@dcloudio/uni-i18n';
import { onLoad } from '@dcloudio/uni-app';
import { isWechat } from '@/utils/platform';

const languages = Object.freeze([
  { id: 'zh', name: '简体中文', value: 'zh-Hans', icon: '/static/china.png' },
  { id: 'en', name: 'English', value: 'en', icon: '/static/usa.png' },
  { id: 'ja', name: '日本語', value: 'ja', icon: '/static/japan.png' },
  { id: 'ko', name: '한국어', value: 'ko', icon: '/static/korea.png' },
  { id: 'zh_CN', name: '繁体中文', value: 'zh-Hant', icon: '/static/china_tw.png' }
]);

const i18n = initVueI18n();

const current = ref<number>(0);

onLoad(() => {
  const language = uni.getStorageSync('language');
  if (language) {
    current.value = languages.findIndex((item) => item.id === language);
  }
});

const currentLanguage = computed(() => {
  return languages[current.value];
});

const isHidden = ref<boolean>(true);

const handleToggle = () => {
  isHidden.value = !isHidden.value;
};

const emit = defineEmits(['change']);

const handleSelectLanguage = (index: number, id: string, value: string) => {
  current.value = index;
  uni.setStorageSync('language', id);
  uni.setLocale(value);
  i18n.setLocale(value);
  isHidden.value = true;
  emit('change');
};
</script>

<template>
  <view v-if="!isWechat()" class="apt-language-selector">
    <view class="apt-language-selector__trigger" @click="handleToggle">
      <slot name="trigger">
        <image :src="currentLanguage.icon" class="apt-language-selector__icon" />
        <view class="apt-language-selector__middle">
          <text class="apt-language-selector__text">{{ currentLanguage.name }}</text>
        </view>
        <view class="apt-language-selector__right">
          <uv-icon color="#3d3d3d" name="arrow-down-fill" size="10" />
        </view>
      </slot>
    </view>
    <view :class="['apt-language-selector__dropdown', { 'is-hidden': isHidden }]">
      <view
        v-for="(language, index) in languages"
        :key="language.id"
        class="apt-language-selector__dropdown-item"
        @click="handleSelectLanguage(index, language.id, language.value)"
      >
        <image :src="language.icon" class="apt-language-selector__icon" />
        <view class="apt-language-selector__middle">
          <text class="apt-language-selector__text">{{ language.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.apt-language-selector {
  position: relative;
  width: 112px;

  &__trigger {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
  }

  &__icon {
    width: 18px;
    height: 18px;
  }

  &__middle {
    flex: 1;
    margin: 0 4px;
  }

  &__text {
    font-size: 13px;
    color: #3d3d3d;
  }

  &__right {
    position: relative;
    top: 2px;
  }

  &__dropdown {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    max-height: 220px;
    transition: max-height 150ms ease-in-out;
    overflow: hidden;
    background-color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 100;

    &.is-hidden {
      max-height: 0;
    }

    &-item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 44px;
      padding: 0 12px;
    }
  }
}
</style>
